<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>教育类移动端登录原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
      background: #f6f7f9;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .container {
      width: 100vw;
      max-width: 400px;
      min-height: 600px; /* 增加最小高度，拉长卡片 */
      background: #fff;
      box-shadow: 0 8px 32px rgba(60,80,120,0.10);
      border-radius: 0 0 28px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 12px 32px 12px; /* 上下padding增加 */
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }
    .top-bar {
      width: 100%;
      height: 56px; /* 高度增加 */
      background: linear-gradient(90deg, #e6eefc 0%, #cbe5ff 100%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 0 0 18px 18px;
      margin-bottom: 6px;
      box-shadow: 0 2px 8px rgba(60,80,120,0.04);
      padding: 0 16px;
      position: relative;
    }
    .welcome-text {
      font-size: 18px;
      color: #3a6ed8;
      font-weight: 600;
      letter-spacing: 1px;
    }
    .subtitle {
      font-size: 13px;
      color: #7a8599;
      margin-top: 2px;
      margin-bottom: 8px;
      text-align: center;
      width: 100%;
      letter-spacing: 0.5px;
    }
    .top-illustration {
      width: 38px;
      height: 38px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .edu-icon {
      width: 60px;
      height: 60px;
      margin: 10px 0 10px 0;
      border-radius: 50%;
      background: #e6eefc;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(60,80,120,0.08);
      animation: float 2.5s ease-in-out infinite alternate;
    }
    @keyframes float {
      0% { transform: translateY(0); }
      100% { transform: translateY(-8px); }
    }
    .edu-icon svg {
      width: 36px;
      height: 36px;
      display: block;
    }
    .title {
      font-size: 22px;
      font-weight: 600;
      color: #2d3a4b;
      margin-bottom: 8px;
      letter-spacing: 1px;
    }
    .role-tabs {
      display: flex;
      width: 100%;
      margin: 14px 0 20px 0;
      justify-content: space-between;
      background: #f3f6fa;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(60,80,120,0.03);
      padding: 2px 2px;
    }
    .role-tab {
      flex: 1;
      text-align: center;
      padding: 9px 0;
      margin: 0 2px;
      border-radius: 6px;
      background: none;
      color: #7a8599;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      user-select: none;
      position: relative;
    }
    .role-tab.active {
      background: #e6eefc;
      color: #3a6ed8;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(60,80,120,0.06);
    }
    .form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 2px;
    }
    .input-group {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      background: #f6f7fa;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(60,80,120,0.04);
      padding: 0 0 0 38px;
      margin-bottom: 2px;
    }
    .input-label {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 15px;
      color: #b0b8c7;
      pointer-events: none;
      transition: 0.2s;
      opacity: 0;
    }
    .input {
      width: 100%;
      min-width: 0;
      padding: 12px 40px 12px 0;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      outline: none;
      background: transparent;
      color: #2d3a4b;
      transition: background 0.2s;
    }
    .input:focus + .input-label,
    .input:not(:placeholder-shown) + .input-label {
      opacity: 0;
    }
    .input-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #b0b8c7;
      pointer-events: none;
    }
    .toggle-pw {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #b0b8c7;
      cursor: pointer;
      user-select: none;
      transition: color 0.2s;
    }
    .toggle-pw:hover {
      color: #3a6ed8;
    }
    .login-btn {
      width: 100%;
      padding: 13px 0;
      background: linear-gradient(90deg, #3a6ed8 0%, #8bb6f9 100%);
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      margin-top: 6px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(60,80,120,0.08);
      transition: background 0.2s, box-shadow 0.2s;
      letter-spacing: 1px;
    }
    .login-btn:active {
      background: linear-gradient(90deg, #8bb6f9 0%, #3a6ed8 100%);
      box-shadow: 0 1px 4px rgba(60,80,120,0.12);
    }
    .footer {
      margin-top: 20px;
      font-size: 13px;
      color: #b0b8c7;
      text-align: center;
      width: 100%;
    }
    .bottom-tip {
      width: 100%;
      margin-top: 10px;
      text-align: center;
      font-size: 13px;
      color: #b0b8c7;
      letter-spacing: 0.5px;
      background: #f6f7fa;
      border-radius: 8px;
      padding: 7px 0 6px 0;
      box-shadow: 0 1px 4px rgba(60,80,120,0.03);
    }
    .bottom-icons {
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 18px;
      margin: 10px 0 0 0;
    }
    .bottom-icons svg {
      width: 26px;
      height: 26px;
      opacity: 0.85;
    }
    .bottom-gradient {
      width: 100vw;
      max-width: 400px;
      height: 18px;
      background: linear-gradient(90deg, #e6eefc 0%, #cbe5ff 100%);
      border-radius: 0 0 18px 18px;
      margin: 10px 0 0 0;
    }
    @media (max-width: 400px) {
      .container {
        max-width: 100vw;
        border-radius: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="top-bar">
      <span class="welcome-text">欢迎登录</span>
      <span class="top-illustration">
        <!-- 校园插画SVG：地球+书本 -->
        <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="14" fill="#cbe5ff" stroke="#8bb6f9" stroke-width="2"/><rect x="10" y="20" width="12" height="4" rx="2" fill="#fff" stroke="#3a6ed8" stroke-width="1.2"/><path d="M10 22c4-2 8-2 12 0" stroke="#8bb6f9" stroke-width="1.2"/></svg>
      </span>
    </div>
    <div class="edu-icon">
      <!-- 教育类svg图标：书本 -->
      <svg viewBox="0 0 48 48" fill="none"><rect x="8" y="12" width="32" height="24" rx="4" fill="#fff" stroke="#3a6ed8" stroke-width="2"/><path d="M8 16c8-4 24-4 32 0" stroke="#8bb6f9" stroke-width="2"/><path d="M24 12v24" stroke="#3a6ed8" stroke-width="2"/></svg>
    </div>
    <div class="subtitle">智慧校园一站式平台</div>
    <div class="role-tabs">
      <div class="role-tab active" data-role="teacher">老师</div>
      <div class="role-tab" data-role="student">学生</div>
      <div class="role-tab" data-role="parent">家长</div>
    </div>
    <form class="form" autocomplete="off" onsubmit="return false;">
      <div class="input-group">
        <span class="input-icon">👤</span>
        <input class="input" id="account" type="text" placeholder="请输入账号" maxlength="20" required>
        <label class="input-label" for="account">账号</label>
      </div>
      <div class="input-group">
        <span class="input-icon">🔒</span>
        <input class="input" id="password" type="password" placeholder="请输入密码" maxlength="20" required>
        <label class="input-label" for="password">密码</label>
        <span class="toggle-pw" id="togglePw" title="显示/隐藏密码">👁️</span>
      </div>
      <button class="login-btn" id="loginBtn" type="submit">登录</button>
    </form>
    <div class="footer">© 2024 教育平台原型设计</div>
    <div class="bottom-tip">请保护好您的账号信息，勿向他人泄露。</div>
    <div class="bottom-icons">
      <!-- 书本 -->
      <svg viewBox="0 0 32 32" fill="none"><rect x="4" y="8" width="24" height="16" rx="3" fill="#fff" stroke="#3a6ed8" stroke-width="1.5"/><path d="M4 10c6-3 18-3 24 0" stroke="#8bb6f9" stroke-width="1.2"/><path d="M16 8v16" stroke="#3a6ed8" stroke-width="1.2"/></svg>
      <!-- 地球 -->
      <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="12" fill="#e6eefc" stroke="#3a6ed8" stroke-width="1.5"/><path d="M8 16c2-4 14-4 16 0" stroke="#8bb6f9" stroke-width="1.2"/><path d="M16 4v24" stroke="#3a6ed8" stroke-width="1.2"/></svg>
      <!-- 铅笔 -->
      <svg viewBox="0 0 32 32" fill="none"><rect x="8" y="20" width="12" height="4" rx="2" fill="#fff" stroke="#3a6ed8" stroke-width="1.2"/><rect x="14" y="8" width="4" height="12" rx="2" fill="#8bb6f9"/><rect x="14" y="6" width="4" height="4" rx="2" fill="#ffd966"/></svg>
    </div>
    <div class="bottom-gradient"></div>
  </div>
  <script>
    // 身份切换
    const tabs = document.querySelectorAll('.role-tab');
    let currentRole = 'teacher';
    tabs.forEach(tab => {
      tab.addEventListener('click', function() {
        tabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        currentRole = this.getAttribute('data-role');
      });
    });
    // 密码可见切换
    const pwInput = document.getElementById('password');
    const togglePw = document.getElementById('togglePw');
    let pwVisible = false;
    togglePw.addEventListener('click', function() {
      pwVisible = !pwVisible;
      pwInput.type = pwVisible ? 'text' : 'password';
      this.textContent = pwVisible ? '🙈' : '👁️';
    });
    // 登录按钮点击反馈
    const loginBtn = document.getElementById('loginBtn');
    loginBtn.addEventListener('click', function() {
      loginBtn.textContent = '登录中...';
      loginBtn.disabled = true;
      setTimeout(() => {
        loginBtn.textContent = '登录';
        loginBtn.disabled = false;
        alert('模拟登录成功！\n身份：' + (currentRole==='teacher'?'老师':currentRole==='student'?'学生':'家长'));
      }, 1200);
    });
  </script>
</body>
</html>